<template>
  <div id="balance-log">
    <div class="tips">
      <div :class="!consume ? 'disalbed' : ''" @click="consume = !consume">
        <span class="circle circle-danger"></span>
        消费
      </div>
      <div :class="!topUp ? 'disalbed' : ''" @click="topUp = !topUp">
        <span class="circle circle-success"></span> 充值
      </div>
    </div>
    <a-skeleton :loading="initLoading">
      <a-timeline :pending="hasMore ? '加载中...' : ''">
        <a-timeline-item
          v-for="(item, key) in data"
          :key="key"
          :color="item.type === 1 ? 'green' : 'red'"
          v-show="(item.type === 1 && topUp) || (item.type === 2 && consume)"
          >{{ item.created_at }}【{{ item.desc }}】<span class="money">{{
            item.amount | formatMoney
          }}</span>
        </a-timeline-item>
      </a-timeline>
    </a-skeleton>
  </div>
</template>

<script>
import { transaction } from "@/api/user";
import common from "@/utils/common";
import { setTimeout } from "timers";
export default {
  props: {
    model: {
      default: ""
    }
  },
  data() {
    return {
      topUp: true,
      consume: true,
      hasMore: true,
      initLoading: true,
      data: [],
      params: {
        page: 1
      }
    };
  },
  created() {
    if (this.model.user_id) {
      this.params.user_id = this.model.user_id;
    }
    this.fecthList();
  },
  methods: {
    fecthList() {
      transaction(this.params).then(res => {
        if (this.initLoading === true) {
          this.initLoading = false;
        }
        if (res.code === 1) {
          if (res.data.next_page_url !== null) {
            this.params.page++;
            setTimeout(this.fecthList, 500);
          } else {
            this.hasMore = false;
          }
          this.data.push(...res.data.data);
        }
      });
    }
  },
  filters: {
    formatMoney(money) {
      return common.formatMoney(money);
    }
  }
};
</script>

<style lang="less" scoped>
#balance-log {
  .tips {
    text-align: center;
    margin-bottom: 24px;
    div {
      cursor: pointer;
      display: inline-block;
      padding: 8px;
    }
    .circle {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 100px;
      border: 2px solid transparent;
    }
    .circle-success {
      border-color: #52c41a;
    }
    .circle-danger {
      border-color: #f5222d;
    }
    .disalbed {
      color: #d9d9d9;
      border-color: #d9d9d9;
      .circle {
        border-color: #d9d9d9;
      }
    }
  }
  .money {
    position: absolute;
    right: 10px;
  }
}
</style>
